<template>
    <el-dropdown trigger="click" class="treeDropdown" ref="dropdown">
        <span class="el-dropdown-link"><p>{{text}}</p><i class="el-icon-arrow-down el-icon--right elIconRight"></i></span>
        <el-dropdown-menu slot="dropdown" class="dropdown-tree">
            <div v-if="showSearch">
                <search-input style="width:80%;margin-left:5px;height:30px;line-height: 35px;margin-bottom:5px;" v-model="searchText"
                              :clearable="true"
                              placeholder="请输入"></search-input>
            </div>
            <div class="companytreeBox">
                <el-dropdown-item>

                    <common-tree
                            :data="data"
                            node-key="id"
                            :searchText="searchText"
                            :defaultProps="defaultProps"
                            @node-click="handleMenuItemClick"
                            :default-expand-all="false"
                    >
                    </common-tree>
                </el-dropdown-item>
            </div>
            <div class="common-drop-button"><el-button class="defaultBtn" @click.native="ChoseOK">确定</el-button></div>
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>

    export default {

        data() {
            return {
                text : '请选择',
                selectedNode: null,
                searchText: ''
            }
        },
        mounted() {
            if(!this.defaultText || this.defaultText.length == 0){
//                if(this.data && this.data.length > 0)
//                this.text = this.data[0].name;
//                this.selectedNode = this.data[0];
            }else{
                this.text = this.defaultText;
            }
        },
        created: function () {
            console.log("text : " + this.text);
        },
        watch:{
            defaultText(val){
                this.text = val;
            }
        },
        methods: {
            handleMenuItemClick(node, instance) {
//                console.log(command)
//                this.$emit('command', command, instance);
                this.selectedNode = node;
            },
            ChoseOK() {
                this.$emit('selected', this.selectedNode ? this.selectedNode.data : null);
                if(this.selectedNode) {
                    this.text = this.selectedNode.data[this.defaultProps.label];
                }
                this.$refs.dropdown.hide();
            }
        },
        props: {
            data:Array,
            defaultText: String,
            trigger: {
                type: String,
                default: 'hover'
            },
            type: String,
            size: {
                type: String,
                default: ''
            },
            splitButton: Boolean,
            hideOnClick: {
                type: Boolean,
                default: true
            },
            placement: {
                type: String,
                default: 'bottom-end'
            },
            visibleArrow: {
                default: true
            },
            showTimeout: {
                type: Number,
                default: 250
            },
            hideTimeout: {
                type: Number,
                default: 150
            },
            defaultProps: {
                type: [Object, Function]
            },
            showSearch:{
                type: [Boolean, Function],
                default: true
            }
//            style: String
        },
    }
</script>
